<template>
  <div
    class="container"
    style="width: 100%"
  >
    <div class="newButton">
      <el-button
        type="primary"
        @click="handleAddRole"
      >
        新建角色
      </el-button>
    </div>
    <Table
      :table-data="tableData"
      :row-header="rowHeader"
      :table-option="tableOption"
      :page-obj="pageObj"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0.1)"
      @handleButton="handleButton"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType==='new'?'新角色':'角色权限编辑'"
      :close-on-click-modal="false"
      @close="dialogVisible=false"
    >
      <SearchForm
        v-if="isShow"
        ref="searchForm"
        class="detialSearch"
        :rules="rules"
        :inline="true"
        :label-width="'150px'"
        :search-form="searchForm"
        :search-data="searchData"
        :search-handle="searchHandle"
        no-border="border:none"
      />
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/index.vue";
export default {
  name: "",
  components: {
    Table,
    SearchForm,
  },
  data() {
    return {
      isShow: true,
      // el-dialog
      dialogVisible: false,
      dialogType: "new",
      // el-tree
      checkStrictly: false,
      defaultProps: {
        children: "children",
        label: "title",
      },
      routes: [],
      rolesList: [],
      tableData: [
        {
          id: 0,
          title: "任务123",
          roleName: "角色1",
          roleDesc: "开发",
        },
        {
          id: "1",
          title: "任务456",
          roleName: "角色2",
          roleDesc: "管理员",
        },
      ],
      rowHeader: [
        {
          label: "标题",
          width: "25px",
          prop: "title",
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            );
          },
        },
        {
          prop: "roleName",
          label: "角色名称",
        },
        {
          prop: "roleDesc",
          label: "角色描述",
        },
      ],
      tableOption: {
        label: "操作",
        width: "320",
        options: [
          {
            type: "text",
            methods: "edit",
            label: "编辑权限",
          },
          {
            type: "text",
            methods: "delete",
            label: "删除",
          },
        ],
      },
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
      rules: {
        role: [
          {
            trigger: "change",
            required: true,
          },
        ],
        roleDesc: [
          {
            trigger: "change",
            required: false,
          },
        ],
      },
      searchData: {
        role: "",
        roleDesc: "",
        manu: [],
      },
      searchForm: [
        {
          type: "Input",
          label: "角色:",
          prop: "role",
          class: "roleInp",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          input: (val) => {},
        },
        {
          type: "Input",
          label: "角色描述:",
          prop: "roleDesc",
          class: "roleDescInp",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          input: (val) => {},
        },
        {
          type: "Tree",
          label: "权限菜单:",
          ref: "tree",
          prop: "manu",
          defaultProps: "defaultProps",
          checkStrictly: "checkStrictly",
          class: "permission-tree",
          defaultProps: "defaultProps",
          InputWidth: "width:100%",
          data: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 9,
                      label: "三级 1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
          ],
          handleCheckChange: (data, checked, indeterminate) => {
            console.log("+++++", this.$refs.searchForm.$refs.tree);
            const keys = [
              //得到id值
              ...this.$refs.searchForm.$refs.tree[0].getCheckedKeys(),
              ...this.$refs.searchForm.$refs.tree[0].getHalfCheckedKeys(),
            ];
            console.log("222", keys);
            // if (checked == true) {
            //   this.searchData.manu.push(data.id);
            // }
            // data.isCheck = checked;
            // this.searchData.manu = [data];
            // console.log(this.searchData.manu);
            // console.log("trtrtrtr", data, checked, indeterminate);
          },
          getCheckedKeys: (leafOnly) => {},
        },
      ],
      searchHandle: [
        {
          type: "danger",
          label: "取消",
          handle: (item) => {
            this.dialogVisible = false;
          },
          clickoutside: () => {},
        },
        {
          type: "primary",
          label: "确定",
          handle: () => {
            console.log(
              "+++++",
              this.$refs.searchForm.$refs.tree.getCheckedKeys()
            );
            const keys = [
              //得到id值
              ...this.$refs.searchForm.$refs.tree.getCheckedKeys(),
              ...this.$refs.searchForm.$refs.tree.getHalfCheckedKeys(),
            ];
            console.log("222", keys);

            // this.dialogVisible = false;
            // console.log(this.searchData.manu);
          },
        },
      ],
    };
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {},
    handleButton(methods, data, row, index) {
      if (methods === "delete") {
        this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        }).then(() => {
          console.log("delete", row);
        });
      } else if (methods === "edit") {
        console.log("编辑");
        this.dialogVisible = true;
        this.dialogType = "edit";
      } else if (methods === "newTask") {
        this.dialogVisible = true;
      }
    },
    handleAddRole() {
      this.dialogVisible = true;
      this.dialogType = "new";
      // this.role = Object.assign({}, defaultRole)
      // if (this.$refs.tree) {
      //   this.$refs.tree.setCheckedNodes([])
      // }
      // this.dialogType = 'new'
      // this.dialogVisible = true
    },
  },
};
</script>
<style lang="scss" >
.container {
  .newButton {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .roleInp {
    .el-form-item__content {
      width: 66%;
      .text {
        width: 100%;
      }
    }
  }
  .roleDescInp {
    .el-form-item__content {
      width: 66%;
      .text {
        width: 100%;
      }
    }
  }
  .InlineBlock {
    margin-left: 426px;
    margin-top: 15px;
  }
}
</style>
